import { load } from '/views/web/script.js'
load('products')

async function renderCarousel() {
  let res = await fetch('http://localhost:3000/products').then((res) =>
    res.json()
  )
  let indicators = document.querySelector('.carousel-indicators')
  indicators.innerHTML = res
    .map(
      (item, index) => `
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="${index}" 
        ${
          index == 0 ? 'class="active" aria-current="true"' : ''
        } aria-label="Slide ${index + 1}"></button>
    `
    )
    .join('')
  // console.log(indicators.innerHTML)
  let inner = document.querySelector('.carousel-inner')
  inner.innerHTML = res
    .map(
      (item, index) =>
        `
        <div class="carousel-item ${index == 0 ? 'active' : ''}">
            <div class="imgstyle" style="background-image: url(${
              item.cover
            });"></div>
            <div class="carousel-caption d-none d-md-block">
                <h5>${item.title}</h5>
                <p>${item.introduction}</p>
            </div>
        </div>
        `
    )
    .join('')
  // console.log("inner",inner.innerHTML)
}
renderCarousel()
